<template>
    <div class="infoBox isUE" :style="{ width: xbsjEarthUi.infoWidth+'px', height: xbsjEarthUi.infoHeight+'px' }" v-if="activePoint.dataId">
        <div class="infoBox-title">
            <div>{{ activePoint.title }}</div>
            <div class="infoBox-title-close">
                <span class="el-icon-close" @click="close()"></span>
            </div>
        </div>
       
        <template v-for="(sub,index) in activePoint.subContent" >
                    <div class="infoBox-iframe" v-if="sub.jnpfKey == 'videoMonitor'" :key="index">
                        <div id='videoMonitor' class='infoBox-iframe-body'>
                            {{ videoInit(sub) }}
                        </div>
                    </div>
                    <div class="infoBox-content" v-if="sub.jnpfKey != 'videoMonitor'" :key="index" >
                        {{ sub.label }}:{{ sub.value }}
                    </div>
        </template>
        <div class="infoBox-iframe" v-if='activePoint.iframeLinkurl'>
            <iframe :src='activePoint.iframeLinkurl' class='infoBox-iframe-body' scrolling='yes' />
        </div>
    </div>
</template>


<script>
export default {
    props: {
        activePoint: {
            type: Object,
            default: {}
        },
        xbsjEarthUi: {
            type: Object
        }
    },
    data() {
        return {
            jessibuca:undefined,
        }
    },
    watch: {
        activePoint: {
            handler: function () {
                if (this.activePoint.dataId == this.dataId) return
            },
            deep: true,
        }
    },
    mounted() {

    },
    methods: {
        videoInit(sub){
            let videoMonitorInfo = sub.value ? JSON.parse(sub.value) : []
            if (videoMonitorInfo.length == 0) return '视频信息不完整'
            this.$nextTick(() => {
                this.create()
                this.play(`${videoMonitorInfo[1]}`)
            })
        },
        create(options) {
            this.jessibuca = new window.Jessibuca(
                {
                    container: document.getElementById('videoMonitor'),
                    decoder: "jessibuca/decoder.js",
                    isResize: false,
                    text: "",
                    // background: "bg.jpg",
                    loadingText: "疯狂加载中...",
                    debug: true,
                    supportDblclickFullscreen: true,
                    showBandwidth: true, // 显示网速
                    operateBtns: {
                        fullscreen: true,
                        screenshot: true,
                        play: true,
                        audio: true,
                    },
                    forceNoOffscreen: true,
                    isNotMute: true,
                    timeout: 10
                }
            );
            var _this = this;
            this.jessibuca.on("load", function () {
                console.log("on load");
            });

            this.jessibuca.on("log", function (msg) {
                console.log("on log", msg);
            });
            this.jessibuca.on("record", function (msg) {
                console.log("on record:", msg);
            });
            this.jessibuca.on("pause", function () {
                console.log("on pause");
                _this.playing = false;
            });
            this.jessibuca.on("play", function () {
                console.log("on play");
                _this.playing = true;
            });
            this.jessibuca.on("fullscreen", function (msg) {
                console.log("on fullscreen", msg);
            });

            this.jessibuca.on("mute", function (msg) {
                console.log("on mute", msg);
                _this.quieting = msg;
            });

            this.jessibuca.on("mute", function (msg) {
                console.log("on mute2", msg);
            });

            this.jessibuca.on("audioInfo", function (msg) {
                console.log("audioInfo", msg);
            });

            // this.jessibuca.on("bps", function (bps) {
            //   // console.log('bps', bps);
            // });
            // let _ts = 0;
            // this.jessibuca.on("timeUpdate", function (ts) {
            //     console.log('timeUpdate,old,new,timestamp', _ts, ts, ts - _ts);
            //     _ts = ts;
            // });

            this.jessibuca.on("videoInfo", function (info) {
                console.log("videoInfo", info);
            });

            this.jessibuca.on("error", function (error) {
                console.log("error", error);
            });

            this.jessibuca.on("timeout", function () {
                console.log("timeout");
            });

            this.jessibuca.on('start', function () {
                console.log('frame start');
            })

            this.jessibuca.on("performance", function (performance) {
                var show = "卡顿";
                if (performance === 2) {
                    show = "非常流畅";
                } else if (performance === 1) {
                    show = "流畅";
                }
                _this.performance = show;
            });
            this.jessibuca.on('buffer', function (buffer) {
                console.log('buffer', buffer);
            })

            this.jessibuca.on('stats', function (stats) {
                console.log('stats', stats);
            })

            this.jessibuca.on('kBps', function (kBps) {
                console.log('kBps', kBps);
            });

            this.jessibuca.on("play", () => {
                this.playing = true;
                this.loaded = true;
                this.quieting = this.jessibuca.isMute();
            });

            this.jessibuca.on('recordingTimestamp', (ts) => {
                console.log('recordingTimestamp', ts);
            })


            // console.log(this.jessibuca);
        },
        play(playUrl) {
            if (playUrl) {
                console.log(playUrl)
                this.jessibuca.play(playUrl);
            }
        },
        close() {
            this.$emit('updateActivePoint',{})
            this.jessibuca && this.jessibuca.destroy()
        },


    },
}
</script>

<style>
.infoBox {
    width: 500px;
    height: 400px;
    background: #2F3034;
    color: #fff;
    padding: 0;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    z-index: 9999999999999;
  
}

.isUE.infoBox{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.infoBox .infoBox-title {
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, 1)
}

.infoBox .infoBox-content {
    padding: 10px 10px 0 10px;
    line-height: 1.5em;
}

.infoBox .infoBox-title-close {
    /* padding:10px; */
    cursor: pointer;
}

.infoBox-iframe {
    /* padding:10px; */
    position: relative;
    flex: 1;
    border: none;
    line-height: 0;
}

.infoBox-iframe-btn {
    position: absolute;
    right: 10px;
    bottom: 30px;
    padding: 2px 5px;
    background: rgba(0, 0, 0, .7);
    color: #fff;
    border-radius: 5px;
    font-size: 12px
}

.isCesium #videoMonitor canvas {
    transform: scale(1) !important;
    top: 0 !important;
    left: 0 !important;
}

.infoBox-iframe-body {
    width: 100%;
    height: 100%;
    border: none;
    overflow: auto
}

#player {
    width: 100%;
    height: 300px
}
</style>